function getDate() {
    var data = localStorage.getItem("todolist"); // 将获取到的数据赋给data
    if (data !== null) { // 如果本地有数据，则返回数据
        return JSON.parse(data); // 本地存储只能存储字符串，所以要想获取里边的数据就必须将字符串转换为数组形式返回
    } else {
        return []; // 如果本地没有数据，则返回一个空数组
    }
}

function saveDate(data) {
    // 用JSON.stringify()将数组转化成字符串保存到本地存储
    localStorage.setItem("todolist", JSON.stringify(data));
}

/***　　　　
 *                               狗头保命
 *    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
*               ii.                                         ;9ABH,
 *              SA391,                                    .r9GG35&G
 *              &#ii13Gh;                               i3X31i;:,rB1
 *              iMs,:,i5895,                         .5G91:,:;:s1:8A
 *               33::::,,;5G5,                     ,58Si,,:::,sHX;iH1
 *                Sr.,:;rs13BBX35hh11511h5Shhh5S3GAXS:.,,::,,1AG3i,GG
 *                .G51S511sr;;iiiishS8G89Shsrrsh59S;.,,,,,..5A85Si,h8
 *               :SB9s:,............................,,,.,,,SASh53h,1G.
 *            .r18S;..,,,,,,,,,,,,,,,,,,,,,,,,,,,,,....,,.1H315199,rX,
 *          ;S89s,..,,,,,,,,,,,,,,,,,,,,,,,....,,.......,,,;r1ShS8,;Xi
 *        i55s:.........,,,,,,,,,,,,,,,,.,,,......,.....,,....r9&5.:X1
 *       59;.....,.     .,,,,,,,,,,,...        .............,..:1;.:&s
 *      s8,..;53S5S3s.   .,,,,,,,.,..      i15S5h1:.........,,,..,,:99
 *      93.:39s:rSGB@A;  ..,,,,.....    .SG3hhh9G&BGi..,,,,,,,,,,,,.,83
 *      G5.G8  9#@@@@@X. .,,,,,,.....  iA9,.S&B###@@Mr...,,,,,,,,..,.;Xh
 *      Gs.X8 S@@@@@@@B:..,,,,,,,,,,. rA1 ,A@@@@@@@@@H:........,,,,,,.iX:
 *     ;9. ,8A#@@@@@@#5,.,,,,,,,,,... 9A. 8@@@@@@@@@@M;    ....,,,,,,,,S8
 *     X3    iS8XAHH8s.,,,,,,,,,,...,..58hH@@@@@@@@@Hs       ...,,,,,,,:Gs
 *    r8,        ,,,...,,,,,,,,,,.....  ,h8XABMMHX3r.          .,,,,,,,.rX:
 *   :9, .    .:,..,:;;;::,.,,,,,..          .,,.               ..,,,,,,.59
 *  .Si      ,:.i8HBMMMMMB&5,....                    .            .,,,,,.sMr
 *  SS       :: h@@@@@@@@@@#; .                     ...  .         ..,,,,iM5
 *  91  .    ;:.,1&@@@@@@MXs.                            .          .,,:,:&S
 *  hS ....  .:;,,,i3MMS1;..,..... .  .     ...                     ..,:,.99
 *  ,8; ..... .,:,..,8Ms:;,,,...                                     .,::.83
 *   s&: ....  .sS553B@@HX3s;,.    .,;13h.                            .:::&1
 *    SXr  .  ...;s3G99XA&X88Shss11155hi.                             ,;:h&,
 *     iH8:  . ..   ,;iiii;,::,,,,,.                                 .;irHA
 *      ,8X5;   .     .......                                       ,;iihS8Gi
 *         1831,                                                 .,;irrrrrs&@
 *           ;5A8r.                                            .:;iiiiirrss1H
 *             :X@H3s.......                                .,:;iii;iiiiirsrh
 *              r#h:;,...,,.. .,,:;;;;;:::,...              .:;;;;;;iiiirrss1
 *             ,M8 ..,....,.....,,::::::,,...         .     .,;;;iiiiiirss11h
 *             8B;.,,,,,,,.,.....          .           ..   .:;;;;iirrsss111h
 *            i@5,:::,,,,,,,,.... .                   . .:::;;;;;irrrss111111
 *            9Bi,:,,,,......                        ..r91;;;;;iirrsss1ss1111　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　丶
 *
 *
 *
 *
 *                       Code is far away from bugs with the animal protecting
 *                       The Wolf bless, we won't meet next week
 */

function load() {
    var data = getDate(); // 先获取本地存储数据

    // 遍历本地存储数据 将他们添加到列表中
    $("ol, ul").empty(); // 遍历之前先清空列表
    var doneCount = 0; // 已经完成的个数
    var todoCount = 0; // 正在进行的个数
    $.each(data, function (i, ele) { // i为索引 ele为遍历对象
        // 如果复选框被选中（已完成done: true）添加到ul里，未被选中（未完成done: false）添加到ol里
        if (ele.done) {
            $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
            doneCount++; // 每添加一个li，已完成数加一
        } else {
            $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
            todoCount++;
        }
    })
    $("#donecount").text(doneCount);
    $("#todocount").text(todoCount);
}
load(); // 第一步先渲染页面，不然一开始刷新页面时列表不显示
$("#title").on("keydown", function (event) {
    if (event.keyCode === 13) {
        if ($(this).val().trim() !== "") { // trim()去除字符串两侧空格
            var data = getDate(); // 获取本地存储数据
            // 把数组进行更新数据，把最新数据追加给数组
            data.push({
                title: $(this).val(),
                done: false
            });
            saveDate(data); // 保存到本地存储
            load(); // 渲染加载到页面
            $(this).val("");
        }
    }
})
$("ol, ul").on("click", "a", function () {
    var data = getDate(); // 获取本地数据（data是局部变量，不用担心冲突）
    var index = $(this).attr("index"); // 用attr获取自定义属性index，得到索引
    // splice(index, num)删除数组对象  index为开始删除的位置，num为删除几个
    data.splice(index, 1);
    saveDate(data);
    load();
})
$("ol, ul").on("click", "input", function () {
    var data = getDate();
    // 利用a获取用户点击的第几个复选框
    var index = $(this).siblings("a").attr("index");
    // 修改数据：data[索引].属性名  获取固有属性用prop
    data[index].done = $(this).prop("checked");
    saveDate(data);
    load();
})
$("ol, ul").on("dblclick", "p", function () {
    var data = getDate();
    var index = $(this).siblings("a").attr("index");
    // 先将p原来的内容获取过来
    var str = $(this).text();
    // 创建一个文本框，直接添加到p里
    $(this).prepend('<input type="text" />');
    // 将原来内容给文本框，并让其为选中(select)状态
    var input = $(this).children();
    input.val(str);
    input.select();
    // 当文本框失去焦点，将修改过的文本框的内容给title
    $(input).on("blur", function () {
        data[index].title = input.val();
        saveDate(data);
        load();
    })
    // 按下回车时保存修改
    $(input).on("keyup", function (e) {
        if (e.keyCode === 13) { // 回车ASCII值为13
            // 手动调用点击事件
            this.blur();
        }
    })
})